<template>
  <!-- <eDialogBg :imgdata="imhurl"></eDialogBg> -->
  <div>
    <div class="deviceDetails">
      <div class="title">
        <div class="titleText">设备监测数值</div>
        <div class="close"></div>
      </div>
      <div class="content">
        <div class="find">
          <div class="currentStyle">
            <span>设备名称</span>
            <el-input v-model="inputValue" placeholder="请输入" class="name" />
          </div>
          <div class="currentStyle">
            <span>设备状态</span>
            <el-select v-model="selectValue" class="m-2" :placeholder="selectValue">
              <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="currentStyle">
            <div class="inquire">查询</div>
          </div>
        </div>
        <Table class="student-achievements-table-box" :tableData="tableData" :options="options"> </Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import Table from "./components/tables.vue";

/* 顶部搜索 */
const inputValue = ref<String>(""); // input
const selectValue = ref("");
const selectList = ref<Array<any>>([
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
]);
//定义表格数据
const options = reactive({
  class: "student-achievements-table-box",
  column: [
    { prop: "serial", label: "序号" },
    { prop: "name", label: "设备名称" },
    { prop: "realTimeNum", label: "实时数值" },
    { prop: "highestValue", label: "最高阀值" },
    { prop: "minimumValue", label: "最低阀值" },
    { prop: "pattern", label: "模式" },
    { prop: "type", label: "状态" },
    { prop: "handle", label: "操作" }
  ]
});
interface tableData {
  serial: number;
  name: string;
  code: string;
  location: string;
  condition: string;
}
let tableData: tableData[] = [
  {
    serial: 1,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 2,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 3,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 4,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 5,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 6,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 7,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 8,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 9,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  },
  {
    serial: 10,
    name: "智慧黑板1",
    code: " YSL-01F",
    location: "教学楼",
    condition: "在线"
  }
];
</script>

<style lang="less" scoped>
.deviceDetails {
  width: 710px;
  height: 498px;
  opacity: 1;
  background-image: url(../../assets/img/lightUp/popUpCenter.png);
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 10px 20px 10px 0;
  margin: 69px 0 0 204px;
  .title {
    width: 670px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 0 0 20px;

    .close {
      width: 22px;
      height: 22px;
      opacity: 1;
      margin: 19px 20px 0 0;
    }

    .titleText {
      font-size: 18px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0px 0px 5px rgba(90, 255, 255, 0.5);
      margin: 8px 0 0 34px;
    }
  }
}
.find {
  height: 32px;
  margin: 20px 20px 0;
  display: flex;
  align-items: center;
}
.name {
  width: 210px;
}
:deep(.el-input) {
  height: 32px;
  background: rgba(8, 11, 22, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
}
:deep(.el-input__wrapper) {
  background: rgba(8, 11, 22, 0.2);
}
:deep(.is-focus) {
  border: none !important;
}
.currentStyle {
  margin-right: 20px;
  span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10px;
  }
}
:deep(.el-selec)t {
  width: 100px;
  height: 32px;
  background: rgba(8, 11, 22, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  :deep(.el-input) {
    width: 100px;
    height: 32px;
  }
}
.inquire {
  width: 60px;
  height: 32px;
  background: rgba(90, 255, 255, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
  text-align: center;
  line-height: 32px;
}
</style>
